<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天地图WMTS服务展示地图</title>
    <!--    <script src="../lib/ol4/ol4.js"></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    // projection.setExtent([-180.00000000000003, -85.05112877980652, 180.00000000000003, 85.05112877980646]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    console.log(projectionExtent);
    const origins = [
        [-180.0, 90.0],
        ol.extent.getTopLeft(projectionExtent)
    ];
    const origin = origins[1];
    console.log('origin:', origin);
    console.log('projection:', projection);
    console.log('projectionExtent', projectionExtent);

    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [];
    const matrixIds = [];
    for (let z = 1; z < 21; z++) {
        resolutions[z - 1] = size / Math.pow(2, z - 1);
        matrixIds[z - 1] = (z - 1).toString();
    }
    // console.log(resolutions);
    // console.log(matrixIds);
    // console.log(resolutions.toString());

    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });

    const url = `http://t0.tianditu.gov.cn/vec_w/wmts?tk=a6bf5a2496115f58481b947040c83ae3`;
    // const url = `http://192.168.81.128:8080/countries-raster`;
    // const url = `http://192.168.81.128:8080/hsroadmap`;
    const baseSource = new ol.source.TileImage({
        projection: 'EPSG:3857',
        // tileGrid: tileGrid,
        tileUrlFunction: (tileCoord, pixelRatio, proj) => {
            let [z, x, y] = tileCoord;
            // 百度瓦片服务url将负数使用M前缀来标识
            return `${url}/${z}/${x}/${y}.png`;
        }
    });
    // 地图
    const baseLayer = new ol.layer.Tile({
        source: baseSource
    });

    const circlePoint = ol.proj.transform([115.68987830420615, 37.74163620118756], 'EPSG:4326', 'EPSG:3857');
    console.log(circlePoint);
    const points = [
        [0, 0],
        [12878538.342760017, 4542991.691869029]
    ];
    const centerPoint = points[1];

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(centerPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 16,
            maxZoom: 19,
            minZoom: 1
            // resolutions
        })
    });
</script>
</html>
